<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>后台</title>

    <link href="__PUBLIC__/images/favicon.ico" rel="shortcut icon" />

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/css/dashboard.css" />
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap-datetimepicker.css" />

</head>

<body>

<include file="Common/topNav" />

<div class="container-fluid">
    <div class="row">
        <include file="Common/leftMenu" />
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="cont-title clearfix">
                <div class="title">会议室管理</div>
            </div>
            <form class="jc-search form-inline" action="" method="post">
                <div class="form-group">
                    <label>办公空间:</label>
                    <select class="form-control" name="space_id">
                        <volist name="spaces" id="item">
                            <option value="{$item.id}" <if condition="$spaceId eq $item['id']">selected="selected"</if>>{$item.name}</option>
                        </volist>
                    </select>
                </div>
                <div class="form-group">
                    <label>月份选择:</label>
                    <input id='datetimepicker' type='text' placeholder="截止时间" value="{$data_time}" name="data_time" class="form-control"  />
                </div>
                <input class="btn" type="submit" value="搜索" />
            </form>
            <div class="table-responsive main-box row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="main-item">
                        <h3 class="tit">团队预约时间统计<i class="icon"></i></h3>
                        <div id="yysc" class="cont"></div>
                    </div>
                </div>
                <!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">-->
                    <!--<div class="main-item">-->
                        <!--<h3 class="tit">会议室预约饼图统计<i class="icon"></i></h3>-->
                        <!--<div id="ytfb" class="cont"></div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">-->
                    <!--<div class="main-item">-->
                        <!--<h3 class="tit">会议室预约柱状统计<i class="icon"></i></h3>-->
                        <!--<div id="nsje" class="cont"></div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">-->
                    <!--<div class="main-item">-->
                        <!--<h3 class="tit">团队人均预约时长<i class="icon"></i></h3>-->
                        <!--<div id="teamrjsc" class="cont"></div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">-->
                    <!--<div class="main-item">-->
                        <!--<h3 class="tit">过去6月的人均预约时长<i class="icon"></i></h3>-->
                        <!--<div id="monthrjsc" class="cont"></div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="main-item">
                        <h3 class="tit">会议（会议室）预约支付统计<i class="icon"></i></h3>
                        <div id="roomyyzf" class="cont"></div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="main-item">
                        <h3 class="tit">会议（团队）预约支付统计<i class="icon"></i></h3>
                        <div id="teamyyzf" class="cont"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/echarts/macarons.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-datetimepicker.js"></script>
</body>
<script>
    var team_list = {$teamList};
    var room_list = {$roomList};
    var team = [];
    var room =[];
    var team_total_length= [];
    var team_total_fee = [];
    var room_total_fee = [];
    for(i=0;i<=team_list.list.length-1;i++){
        team.push(team_list.list[i].team_name);
        team_total_length.push(team_list.list[i].total_length);
        team_total_fee.push(team_list.list[i].total_fee);
    }
    console.log(room_list.list);
    for(j=0;j<=room_list.list.length-1;j++){
        room.push(room_list.list[j].name);
        room_total_fee.push(room_list.list[j].total_fee);
    }
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm',
        language: 'ch',
        pickDate: true,
        pickTime: false,
        autoclose:true,
        minView: 3,
        maxView: 3,
        startView:3
        //pickerPosition:"bottom-left"
    });
    $(function() {
        init();
    })

    function init() {
        yysc();
//        nsje();
//        ytfb();
//        teamrjsc();
//        monthrjsc();
        roomyyzf();
        teamyyzf();
    }
    //团队预约时长统计
    function yysc() {
        var myChart = echarts.init(document.getElementById('yysc'), "macarons");
        option = {
            tooltip : {
                trigger: 'item'
            },

            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    saveAsImage : {show: true}
                },
                padding : 15
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    data : team
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value} 小时',
                        textStyle : {
                            fontSize : 10
                        }
                    }
                }
            ],
            itemStyle:{
                normal:{
                    color:'#87CEFA'
                }
            },
            series : [
                {
                    name:'团队预约时间值',
                    type:'bar',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:team_total_length,
                    barWidth: '60%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontFamily: '微软雅黑',
                                    fontWeight: 'bold'
                                },
                                formatter: "{c} 小时"
                            }
                        }
                    }
                }
            ]
        };




        myChart.setOption(option);
    }
    //团队人均预约时长统计
    function teamrjsc() {

        var myChart = echarts.init(document.getElementById('teamrjsc'), "macarons");
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['团队人均预约时长']
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['团队1','团队2','团队3','团队4']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value} 小时',
                        textStyle : {
                            fontSize : 10
                        }
                    }
                }
            ],
            series : [
                {
                    name:'团队人均预约时长',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[6, 12, 8, 10, 9]
                }
            ]
        };


        myChart.setOption(option);
    }
    //过去6个月人均预约时长统
    function monthrjsc() {

        var myChart = echarts.init(document.getElementById('monthrjsc'), "macarons");
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['过去6个月人均预约时长']
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['2017.6','2017.7','2017.8','2017.9','2017.10','2017.11']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'过去6个月人均预约时长',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[3, 2, 1.5, 0.5, 3, 2.7]
                }
            ]
        };


        myChart.setOption(option);
    }
    //会议（会议室）预约支付统计
    function roomyyzf() {

        var myChart = echarts.init(document.getElementById('roomyyzf'), "macarons");
        option = {
            tooltip : {
                trigger: 'item'
            },

            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    saveAsImage : {show: true}
                },
                padding : 15
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    data : room
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value} 元',
                        textStyle : {
                            fontSize : 10
                        }
                    }
                }
            ],
            itemStyle:{
                // 颜色定义
                normal:{color:'#ADD8E6'}
            },
            series : [
                {
                    name:'会议室（会议室）预约支付',
                    type:'bar',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:room_total_fee,
                    barWidth: '60%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontFamily: '微软雅黑',
                                    fontWeight: 'bold'
                                },
                                formatter: "{c} 元"
                            }
                        }
                    }
                }
            ]
        };


        myChart.setOption(option);
    }
    //会议（团队）预约支付统计
    function teamyyzf() {
        var myChart = echarts.init(document.getElementById('teamyyzf'), "macarons");
        option = {
            tooltip : {
                trigger: 'item'
            },

            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    saveAsImage : {show: true}
                },
                padding : 15
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    data : team
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter : '{value} 元',
                        textStyle : {
                            fontSize : 10
                        }
                    }
                }
            ],
            itemStyle:{
                normal:{
                    color:'#B0C4DE'
                }
            },
            series : [
                {
                    name:'会议室（团队）预约支付',
                    type:'bar',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:team_total_fee,
                    barWidth: '60%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontFamily: '微软雅黑',
                                    fontWeight: 'bold'
                                },
                                formatter: "{c} 元"
                            }
                        }
                    }
                }
            ]
        };


        myChart.setOption(option);
    }


    function nsje() {
        var myChart = echarts.init(document.getElementById('nsje'), "macarons");
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['1楼会议室', '2楼会议室', '3楼会议室', '4楼会议室', '5楼会议室'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value',
                axisLabel : {
                    formatter : '{value} 小时',
                    textStyle : {
                        fontSize : 10
                    }
                }
            }],
            series: [{
                name: '预约时长',
                type: 'bar',
                barWidth: '60%',
                data: [2, 2.5, 1.5, 0.2, 1.3]
            }]
        };
        myChart.setOption(option);
    }



    function ytfb() {
        var myChart = echarts.init(document.getElementById('ytfb'), "macarons");

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['1楼会议室', '2楼会议室', '3楼会议室', '4楼会议室', '5楼会议室']
            },
            series: [{
                name: '会议室柱状统计',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: [{
                    value: 2,
                    name: '1楼会议室'
                },
                    {
                        value: 2.5,
                        name: '2楼会议室'
                    },
                    {
                        value: 1.5,
                        name: '3楼会议室'
                    },
                    {
                        value: 2,
                        name: '4楼会议室'
                    },
                    {
                        value: 1.3,
                        name: '5楼会议室'
                    }
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>

</html>